<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黄历吉日</title>
    <!-- 链接外部样式 -->
    <link rel="stylesheet" href="../static/stylesheets/huangli/nav.css">
    <link rel="stylesheet" href="../static/stylesheets/huangli/huangli-wrapper.css">
    <link rel="stylesheet" href="../static/stylesheets/layui/css/layui.css">
    <script type="text/javascript" src="../static/stylesheets/layui/layui.js"></script> 
    <!--<script type="text/javascript" src="layui/layui.js"></script>-->
    <script type="text/javascript" src="../static/javaScript/huangli-preday.js"></script>
</head>

<body>
    <div class="container container-center">
        <!-- 导航模块 -->
        <div class="nav">
            <div class="logo"><img src="" alt="">logo</div>
            <div class="header">
                <ul>
                    <a href="#">
                        <li>首页</li>
                    </a>
                    <a href="#">
                        <li>八字婚姻</li>
                    </a>
                    <a href="#">
                        <li>八字精批</li>
                    </a>
                    <a href="#">
                        <li>黄道吉日</li>
                    </a>
                    <a href="#">
                        <li>八字财运</li>
                    </a>
                    <a href="#">
                        <li>八字起名</li>
                    </a>
                </ul>
            </div>
        </div>
        <div class="huangli-wrapper">
            <!---日历显示-->
            <div class="almanac-show">
                <input type="text" class="demo-input testView" placeholder="请选择日期">
                <div id="almanac-table"></div>
                <script>
                    layui.use('laydate', function(){
                        var laydate = layui.laydate;
 

                        //执行一个laydate实例
                        laydate.render({
                            elem: '#almanac-table' //指定元素
                            ,format: 'yyyy年MM月dd日' //可任意组合
                            ,theme: '#7b4f9b'
                            ,calendar: true
                            ,position: 'static'
                            ,change: function(value, date){ //监听日期被切换
                                document.querySelector('.testView').value=value
                            }
                            ,done: function(value){
                                console.log(value); //得到日期生成的值，如：2017-08-18    
                            }
                            
                            
                        });
                    })
                </script>
            </div>
            <!--右边今日显示-->
            <div class="almanac-today">
                <div class="pre-day">
                    <div class="pre-day-show">
                    </div>
                    <div class="show-day-only">
                    </div>
                    <div class="show-nongli">
                        传入农历，辛丑年什么的！
                    </div>
                </div>
                <div class="fit-quit">
                    <div class="fit">
                        <div class="circle-first">宜</div>
                        <div class="fit-content">传入今天宜啥</div>
                    </div>
                    <div class="quit">
                        <div class="circle-last">忌</div>
                        <div class="quit-content">传入今天忌啥</div>
                    </div>
                </div>
            </div>
        </div>
        <!--黄历名词解释-->
        <div class="huangli-wrapper huangli-nouns">
            <div class="nouns-title"><span>黄历名词解释</span></div>
            <div class="nouns-explain layui-tab ">
                <ul class="layui-tab-title ">
                  <li class="layui-this">婚姻类</li>
                  <li >营建类</li>
                  <li>工商类</li>
                  <li>祭祀类</li>
                  <li>生活类</li>
                  <li>丧葬类</li>
                  <li>其他类</li>
                </ul>
                <div class="layui-tab-content">
                  <div class="layui-tab-item layui-show">内容1</div>
                  <div class="layui-tab-item">内容2</div>
                  <div class="layui-tab-item">内容3</div>
                  <div class="layui-tab-item">内容4</div>
                  <div class="layui-tab-item">内容5</div>
                </div>
              </div>
               
              <script>
              //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
              layui.use('element', function(){
                let element = layui.element;
                
                //…
              });
              </script>
        </div>
    
        <div class="footer">
            友情链接
        </div>
    </div>
    

</body>

</html>